<template>
  <!-- 
    表格顶部工具栏
    toolData [
      {
        label 文案
        icon  图案链接
        type  按钮
        disabled 禁止
        color 颜色 primary warning
        permission 权限 不传默认会显示按钮
      }
    ]
 -->
  <div class="table-tool-btns">
    <div
      class="btn-box"
      v-for="(item, index) in toolData"
      :key="item.type ? item.type : item.label + ' - ' + index"
      @click="onToolClick(item)"
    >
      <!-- <img class="icon-img" v-if="item.img" :src="item.img" /> -->
      <el-button :icon="item.icon" :disabled="item.disabled">{{
        item.label
      }}</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "TableToolBtns",
  props: {
    toolData: {
      type: Array,
      required: true,
      default: [],
    },
  },
  data() {
    return {};
  },
  methods: {
    // 工具栏按钮触发事件
    onToolClick(data) {
      const { disabled } = data;
      if (disabled) {
        // 禁止
        return;
      }
      this.$emit("onToolClick", data);
    },
    getBtnItemClass(item) {
      const { type, disabled } = item;
      if (type === "delete" && !disabled) {
        const { color = "primary" } = item;
        return `red-item btn-item operator-${color}-button`;
      } else {
        const { color = "primary" } = item;
        return `btn-item operator-${color}-button`;
      }
    },
  },
};
</script>
<style scoped lang="scss" src="./index.scss"></style>
